$fontColor:#001737;
$hoverColor:#012684;
$tagColor:#ccc;
$textColor:#666666;
$leftWidth:1000px;
$rightWidth:400px;
$margin:20px;
$padding:10px;
$borderRadius:4px;

/**导航动画*/
header ul a {
  position: relative;

  transition: color .3s ease;
  text-decoration: none;

  color: rgba(0, 0, 0, 0.4);

  font-weight: 600;
}

header ul li a::after {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;

  height: 3px;

  content: '';
  transition: -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
  -webkit-transform: scaleX(var(--scale));
  transform: scaleX(var(--scale));
  -webkit-transform-origin: var(--x) 50%;
  transform-origin: var(--x) 50%;

  background: #03c63a;

  --scale: 0;
}

header ul a:hover {
  color: #03c63a;
}

header ul a:hover::after {
  --scale: 1;
}

h1 {
  font-size: 26px;
}

.container {
  margin-top: 76px;
  padding-top: $margin;

  background-color: #f5f5f5;

  .top {
    display: flex;
    justify-content: center;

    width: 100%;
    height: 400px;

    .left {
      width: $leftWidth;
      height: 400px;
      margin-right: $margin;

      #vsCarousel {
        width: $leftWidth;
        height: 100%;

        border-radius: $borderRadius;

        .vsCarousel-box {
          width: $leftWidth;

          &>img {
            width: $leftWidth;
            height: 100%;
          }
        }

        .vsCarousel-button-prev {
          left: 2%;
        }

        .vsCarousel-button-next {
          right: 2%;
        }
      }
    }

    .right {
      position: relative;

      width: $rightWidth;
      height: 400px;

      border-radius: $borderRadius;
      background-color: #fff;

      .right-top {
        &>img {
          width: 100%;
          height: 156px;

          border-radius: $borderRadius $borderRadius 0px 0px;
        }
      }

      .right-center {
        display: flex;
        align-items: center;
        flex-direction: column;

        margin-top: 60px;

        font-size: 18px;

        .qqwx {
          display: flex;

          font-size: 16px;

          &>span {
            display: flex;
            align-items: center;

            height: 40px;

            color: $textColor;

            &:first-child {
              margin-right: 20px;
            }

            &>img {
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }
          }
        }

        .subname {
          color: $textColor;

          font-size: 14px;
          line-height: 40px;
        }
      }

      .right-bottom {
        margin-top: 20px;

        &>ul {
          display: flex;
          justify-content: space-between;

          &>li {
            width: 33%;

            text-align: center;

            border-right: 1px solid rgba(0, 0, 0, 0.4);

            font-size: 16px;

            .name {
              color: $textColor;

              line-height: 30px;
            }
          }

          &>:last-child {
            border: none;
          }
        }
      }

      .headPortrait {
        position: absolute;
        top: 100px;

        display: flex;
        justify-content: center;

        width: 100%;

        &>img {
          width: 100px;
          height: 100px;
          margin: 0 auto;

          transition: all 0.6s;

          border: 4px solid #fff;
          border-radius: 50%;
        }

        &>img:hover {
          transform: rotate(-360deg);
        }
      }
    }
  }

  .bottom {
    display: flex;
    justify-content: center;

    width: 100%;
    margin-top: $margin;

    .bodyThe {
      width: $leftWidth;
      height: 100%;
      margin-right: $margin;

      .searchTitle {
        color: $textColor;

        line-height: 40px;
      }

      .list {
        position: relative;

        .list-item {
          margin-bottom: $margin;
          padding: $margin;

          border-radius: $borderRadius;
          background-color: #fff;

          .title {
            overflow: hidden;

            height: 40px;

            cursor: pointer;
            white-space: nowrap;
            text-overflow: ellipsis;

            color: $fontColor;
            border-bottom: 1px solid #e4e8eb;

            font-size: 22px;
            line-height: 30px;
          }

          .tags {
            display: flex;
            align-items: center;

            height: 40px;

            color: $tagColor;

            font-size: 14px;
            line-height: 30px;

            &>span {
              margin-right: $margin;

              &>img {
                width: 20px;
                height: 20px;
                margin-right: 10px;
              }
            }
          }

          .list-content {
            display: flex;
            justify-content: space-between;

            width: 100%;

            cursor: pointer;

            .list-img {
              overflow: hidden;

              margin-right: $margin;


              &>a>img {
                width: 280px;
                height: 160px;

                cursor: pointer;
                transition: all 0.6s;

                border-radius: $borderRadius;
              }

              &>a>img:hover {
                transform: scale(1.1);

                border-radius: $borderRadius;
              }
            }

            .list-intro {
              display: -webkit-box;
              overflow: hidden;
              /* 超出n行这里写n */
              -webkit-box-orient: vertical;

              width: 800px;

              text-align: justify;
              text-overflow: ellipsis;

              color: $textColor;

              font-size: 16px;
              line-height: 33px;

              -webkit-line-clamp: 5;
            }

          }
        }

        .istop {
          position: absolute;
          top: 0px;
          left: 0px;

          width: 50px;
        }
      }
    }

    .sidebar {
      width: $rightWidth;
      height: 100%;
    }

    .commentsArticle {
      height: 100%;

      .articleDetails {
        width: $leftWidth;
        height: 100%;
        margin-right: 20px;
        padding: 20px;

        border-radius: $borderRadius;
        background: #fff;

        .single {
          height: 100%;

          &>h1 {
            padding-bottom: 10px;

            border-bottom: 1px solid $tagColor;

            line-height: 30px;
          }

          .wz_info {
            display: flex;
            align-items: center;

            color: $tagColor;

            font-size: 14px;
            line-height: 30px;

            &>span {
              margin-right: $margin;

              &>img {
                width: 20px;
                height: 20px;
                margin-right: 10px;
              }
            }
          }

          .content {
            font-size: 16px;

            .ue-upload {
              &>img {
                margin-right: 10px !important;
              }
            }
          }

          p {
            font-size: 14px;
            line-height: 30px;
          }

          .tags {
            display: flex;

            margin-top: 20px;

            font-size: 14px;

            &>p:first-child {
              width: 60px;
            }

            &>p:last-child {
              display: flex;
              align-items: center;
              flex-wrap: wrap;

              &>a {
                margin-right: 20px;
                margin-bottom: 10px;
                padding: 0px 10px;

                border: 1px solid rebeccapurple;
                border-radius: $borderRadius;
              }
            }
          }

          .info-pre-next {
            display: flex;
            align-items: flex-end;
            flex-direction: column;

            font-size: 14px;
          }
        }
      }

      .commentsDetails {
        width: 1000px;
        margin-top: 20px;
        padding: 20px;

        border-radius: $borderRadius;
        background-color: #fff;

        ul.msg {
          width: 100%;
          margin: 10px 0 0px 0;
          padding: 5px 0px;

          table-layout: fixed;
          list-style-position: outside;

          text-align: left;
          word-wrap: break-word;
        }

        .tbname {
          height: 35px;
          padding-left: 20px;

          border-left: 4px solid #080808;
          background: #f6f7fa;

          font-size: 16px;
          line-height: 35px;
        }

        li.msgname {
          display: flex;
          align-items: center;

          color: #9ca0ad;

          font-size: 14px;
        }

        li.msgname .msgNameRight {
          display: flex;
          flex-direction: column;
          /* align-items: center; */
          justify-content: center;
        }

        li.msgname a {
          color: #9ca0ad;
        }


        li.msgurl {
          margin: 0;
          padding: 2px 10px 2px 10px;

          text-align: right;

          font-size: 1em;
        }

        img.avatar {
          float: left;

          width: 40px;
          height: 40px;
          margin-right: 15px;

          border: 2px solid #fff;
          border-radius: 50%;
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, .1);
        }

        .commentname {
          float: left;
        }

        .msginfo {
          margin-top: 10px;
          padding: 10px 20px 20px;

          background-color: #f6f7fa;

          line-height: 30px;
        }

        .msgcon {
          margin-bottom: 10px;
          padding: 15px;

          border-radius: 3px;
          background-color: #fff;
        }

        .tbname {
          padding-left: 10px;

          border-left: 5px solid #9a9a9a;

          font-size: 16px;
          line-height: 35px;
        }

        .posttop {
          margin-top: 15px;
          padding-left: 10px;

          border-left: 5px solid #9a9a9a;

          font-size: 16px;
          line-height: 35px;
        }

        #txaArticle {
          width: 100%;
          margin-top: 10px;

          transition: all .35s ease 0s;

          border: 1px solid rgba(227, 229, 236, .4);
          border-radius: 0;
          background: #f8f8fc;

          line-height: 30px;
        }

        #inpName,
        #inpEmail,
        #inpHomePage {
          width: 100%;
          height: 30px;

          transition: all .35s ease 0s;

          border: 1px solid rgba(227, 229, 236, .4);
          border-radius: 0;
          background: #f8f8fc;

          line-height: 30px;
        }

        .button {
          height: 35px;
          margin-top: 10px;
          padding: 0 20px;

          cursor: pointer;
          transition: 0.3s ease-out;
          text-align: center;
          white-space: nowrap;

          opacity: .9;
          color: #fff;
          border: 0;
          border-radius: 2px;
          background-color: #00aeff;

          font-size: 14px;
          line-height: 35px;
        }
      }
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 50px;
    margin-top: $margin;

    color: #fff;
    background: rgba(0, 0, 0, 0.6);

    font-size: 16px;

    &>p {
      margin-right: 30px;

      &>a {
        color: #fff;
      }

      &>a:hover {
        color: $hoverColor;
      }
    }
  }
}

/** 分页 */
.pageBar {
  display: flex;
  justify-content: center;

  &>li>a,
  .currentPage {
    display: block;

    height: 30px;
    margin-right: 10px;
    padding: 0px 10px;

    cursor: pointer;
    text-align: center;

    border-radius: $borderRadius;
    background: #fff;

    font-size: 16px;
    line-height: 30px;
  }

  .currentPage {
    color: $hoverColor;
    border: 1px solid $hoverColor;
  }
}

/** 返回顶部*/
.icon-top {
  position: fixed;
  z-index: 9999999;
  right: 40px;
  bottom: 5%;

  width: 48px;
  height: 48px;

  transition: all 0.3s;

  opacity: 0;
  border-radius: 100%;
  background: url(../style/images/returnToTop.png) no-repeat center;
  background-size: 48px;
}

.cd-is-visible {
  opacity: 1;
}

/** 侧边栏*/
.sidebar {
  .function {
    position: relative;

    margin-bottom: 20px;
    padding: 0px 20px;

    border-radius: $borderRadius;
    background: #fff;

    .function_c {
      margin: 10px 0px;
    }

    &>dt {
      height: 30px;
      padding-left: 30px;

      color: $fontColor;
      border-bottom: 1px solid #e4e8eb;

      font-size: 14px;
      line-height: 30px;
    }
  }

  // 日历
  #divCalendar {

    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/calendar.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      display: flex;
      justify-content: center;

      #tbCalendar {
        display: flex;
        align-items: center;
        flex-direction: column;

        &>caption {
          display: flex;

          margin-bottom: 10px;

          font-size: 16px;
        }

        &>thead {
          &>tr {
            &>th {
              width: 30px;
              height: 30px;
              padding: 4px 10px;
            }
          }
        }

        &>tbody {
          margin-bottom: 10px;

          &>tr {
            &>td {
              width: 30px;
              height: 30px;
              padding: 4px 10px;

              text-align: center;

              &>a {
                display: flex;
                justify-content: center;

                width: 30px;
                height: 30px;

                color: #fff;
                border-radius: $borderRadius;
                background-color: #012684;

                font-weight: 500;
                line-height: 30px;
              }
            }
          }
        }
      }
    }
  }

  // 搜索
  #divSearchPanel {
    .function_t::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/sousuo.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      form {
        display: flex;
        justify-content: space-between;

        input:first-child {
          width: 80% !important;
          height: 30px;
          margin-right: 20px;
          margin-bottom: 10px !important;

          border: 1px solid #d2d2d2;
          border-radius: $borderRadius;
          background-color: transparent;
        }

        input:last-child {
          width: 20%;
          height: 32px;

          cursor: pointer;

          border: 1px solid #d2d2d2;
          border-radius: $borderRadius;
          background: #fff;
        }

        input:last-child:hover {
          color: $hoverColor;
          border-color: $hoverColor;
        }
      }
    }
  }

  // 图表汇集
  #divMisc {
    .function_c {
      padding: 10px 0px;

      &>ul {
        display: flex;

        &>li {
          margin-right: 10px;
        }

      }
    }
  }

  // 友情链接
  #divLinkage {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/youqinglianjie.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      padding-bottom: 10px;

      &>ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        &>li {
          margin-right: 20px;
          margin-bottom: 10px;

          border-bottom: 1px solid #d2d2d2;

          line-height: 20px;
        }
      }
    }
  }

  // 控制面板
  #divContorPanel {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/biaosheji.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      padding-bottom: 10px;

      &>div {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;


        .cp-hello {
          display: flex;
          justify-content: center;

          width: 100%;
          margin-bottom: 20px;

          font-size: 16px;
        }

        .cp-login,
        .cp-vrs {
          width: 48%;
          height: 30px;
          margin: 10px 0px;

          cursor: pointer;
          text-align: center;

          border: 1px solid #d2d2d2;
          border-radius: $borderRadius;

          font-size: 14px;
          line-height: 30px;
        }

        .cp-login:hover,
        .cp-vrs:hover {
          color: #012684;
          border-color: #012684;
        }
      }
    }
  }

  // 最近发表
  #divPrevious {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/ziyuan60.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      padding-bottom: 10px;

      &>ul {
        margin-bottom: 10px;

        &>li {
          font-size: 14px;
          line-height: 30px;
        }
      }
    }
  }

  // 文章归档
  #divArchives {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/guidang.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      padding-bottom: 10px;

      &>ul {
        display: flex;
        flex-wrap: wrap;

        &>li {
          margin-right: 20px;
          margin-bottom: 10px;

          border-bottom: 1px solid #d2d2d2;

          font-size: 14px;
          line-height: 30px;
        }
      }
    }
  }

  // 导航栏
  #divNavBar {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/daohanglan_moshi.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      padding-bottom: 10px;

      &>ul {
        &>li {
          font-size: 14px;
          line-height: 30px;
        }
      }
    }
  }

  // 标签列表
  #divTags {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/biaoqianlan.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      padding-bottom: 10px;

      &>div {
        &>ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          &>li {
            margin-right: 20px;
            margin-bottom: 10px;

            border-bottom: 1px solid #d2d2d2;

            font-size: 14px;
            line-height: 30px;
          }
        }
      }
    }
  }

  // 热门文章
  #avocadopro_hotPost {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/remen.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      padding-bottom: 10px;

      line-height: 30px;
    }
  }

  // 网站分类
  #divCatalog {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/biaoqiankuozhan_fenlei-112.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      padding-bottom: 10px;

      &>ul {
        display: flex;
        flex-wrap: wrap;

        &>li {
          margin-right: 20px;
          margin-bottom: 10px;

          border-bottom: 1px solid #d2d2d2;

          font-size: 14px;
          line-height: 30px;
        }
      }
    }
  }

  // 最新留言
  #divComments {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/liuyan.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      &>ul {
        padding-bottom: 10px;

        &>li {
          margin-right: 20px;
          margin-bottom: 10px;

          border-bottom: 1px solid #d2d2d2;

          font-size: 14px;
          line-height: 30px;
        }
      }
    }
  }

  // 作者列表
  #divAuthors {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/chuangzuozhezhongxin.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      &>ul {
        padding-bottom: 10px;

        &>li {
          margin-right: 20px;
          margin-bottom: 10px;

          border-bottom: 1px solid #d2d2d2;

          font-size: 14px;
          line-height: 30px;
        }
      }
    }
  }

  // 网站收藏
  #divFavorites {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/shoucang.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      &>ul {
        display: flex;
        flex-wrap: wrap;

        &>li {
          margin-right: 20px;
          margin-bottom: 10px;

          border-bottom: 1px solid #d2d2d2;

          font-size: 14px;
          line-height: 30px;
        }
      }
    }
  }

  // 站点信息
  #divStatistics {
    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/zhandianxinxi.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      padding-bottom: 10px;

      &>ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        &>li {
          width: 40%;
          margin-right: 20px;
          margin-bottom: 10px;

          border-bottom: 1px solid #d2d2d2;

          font-size: 14px;
          line-height: 30px;
        }
      }
    }
  }

  // 自定义热门文章
  #topArticl_module {
    margin-bottom: 20px;
    padding: 0px 20px;

    background-color: #fff;

    &>dt::before {
      position: absolute;
      top: 4px;
      left: 20px;

      width: 20px;
      height: 20px;

      content: "";

      background: url(../style/images/remen.png) no-repeat center;
      background-size: 20px;
    }

    .function_c {
      &>div {
        &>ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          &>li {
            width: 48%;
            height: 200px;

            cursor: pointer;

            &>a {
              &>img {
                height: 140px;
                margin-bottom: 4px;

                border-radius: $borderRadius $borderRadius 0px 0px;
              }

              &>p {
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;

                text-overflow: ellipsis;
                word-break: break-all;

                line-height: 20px;

                -webkit-line-clamp: 3;
              }
            }
          }
        }
      }
    }
  }
}

// 当前位置
.location {
  width: 1400px;
  margin: 0 auto;

  font-size: 14px;
}

// 滚动条
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 6px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset006px rgba(0, 0, 0, 0.3);
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.31);
  -webkit-box-shadow: inset006px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}

// @media
@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .container {
    .top {
      .left {
        width: 800px;

        #vsCarousel {
          width: 800px;
        }
      }
    }

    .location {
      width: 1200px;
    }

    .bottom {
      margin-top: 10px;

      .bodyThe {
        width: 800px;
      }

      .commentsArticle {
        .articleDetails {
          width: 800px;

          .wz_info {
            flex-wrap: wrap;

            height: auto;
          }
        }

        .commentsDetails {
          width: 800px;
        }
      }
    }
  }
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .container {
    .top {
      .left {
        width: 600px;

        #vsCarousel {
          width: 600px;
        }
      }
    }

    .location {
      width: 1000px;
    }

    .bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      margin-top: 10px;

      .bodyThe {
        width: 600px;
        margin-top: 20px;
      }

      .commentsArticle {
        .articleDetails {
          width: 600px;

          .wz_info {
            flex-wrap: wrap;

            height: auto;
          }
        }

        .commentsDetails {
          width: 600px;
        }
      }

    }
  }
}

@media screen and (min-width: 960px) and (max-width: 1024px) {
  .container {
    padding-top: 10px;

    .footer {
      margin-top: 0px;
    }

    .location {
      margin-bottom: 10px;
    }

    .top {
      .left {
        display: flex;
        justify-content: center;

        width: 100%;
        margin: 0px;

        #vsCarousel {
          width: 100%;
          margin: 0px 11px;

          img {
            border-radius: $borderRadius;
          }
        }
      }

      .right {
        display: none;
      }
    }

    .bottom {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;

      margin: 0px 10px 10px 10px;

      .bodyThe {
        width: calc(100% - 20px);
        margin-top: 10px;
        margin-right: 0px;

        .list {

          .list-item {
            margin-bottom: 10px;

            .list-img {
              width: 30% !important;
            }

            .list-intro {
              width: 70% !important;
            }
          }
        }
      }

      .commentsArticle {
        width: calc(100% - 20px);

        .articleDetails {
          width: calc(100% - 40px);

          .wz_info {
            flex-wrap: wrap;

            height: auto;
          }

        }

        .commentsDetails {
          width: calc(100% - 40px);
        }
      }

      .sidebar {
        width: calc(100% - 40px);
        margin-top: 10px;
        margin-left: 10px;

        .function {
          margin-bottom: 10px !important;
        }
      }
    }
  }
}

@media screen and (min-width:768px) and (max-width: 960px) {
  .container {
    margin-top: 30px;

    .footer {
      margin-top: 0px;
    }

    .location {
      width: calc(100% - 20px);
    }

    .top {

      .left {
        display: flex;
        justify-content: center;

        width: 100%;
        margin: 0px 10px;

        #vsCarousel {
          width: 100%;

          img {
            border-radius: $borderRadius;
          }
        }
      }

      .right {
        display: none;
      }
    }

    .bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      margin-top: 10px;

      .bodyThe {
        width: 100%;
        margin: 0px 11px;

        .list {
          .list-item {
            height: 160px;
            margin: 0px 10px 10px 10px;

            .list-content {
              height: 94px;

              .list-img {
                margin-right: 10px;

                &>a {
                  &>img {
                    height: 94px;
                  }
                }
              }

              .list-intro {
                &>a {
                  display: -webkit-box;
                  overflow: hidden;
                  overflow: hidden;
                  /* 超出n行这里写n */
                  -webkit-box-orient: vertical;

                  text-overflow: ellipsis;

                  font-size: 12px;
                  line-height: 20px;

                  -webkit-line-clamp: 4;
                }
              }
            }
          }

          .istop {
            left: 10px;

            width: 30px;
          }

          .tags {
            display: flex;
            align-items: center;

            height: 100%;



            &>span {
              margin-right: 10px !important;

              font-size: 12px !important;

              &>img {
                width: 14px !important;
                height: 14px !important;
                margin-right: 4px !important;
              }
            }
          }
        }
      }

      .commentsArticle {
        width: calc(100% - 20px);

        .articleDetails {
          width: calc(100% - 40px);

          .wz_info {
            flex-wrap: wrap;

            height: auto;
          }

        }

        .commentsDetails {
          width: calc(100% - 40px);
          margin-top: 10px;
        }
      }

      .sidebar {
        width: 100%;
        margin: 0px 11px;
        margin-top: 10px;

        .function {
          margin-bottom: 10px !important;
        }
      }
    }


    .footer {
      flex-direction: column;
    }

    .pageBar {
      flex-wrap: wrap;
    }
  }
}

@media screen and (min-width:640px) and (max-width:768px) {
  .container {
    margin-top: 36px;
    padding-top: 10px;

    .footer {
      margin-top: 0px;
    }

    .location {
      width: calc(100% - 20px);
    }

    .top {

      .left {
        display: flex;
        justify-content: center;

        width: 100%;
        margin: 0px 10px;

        #vsCarousel {
          width: 100%;

          img {
            border-radius: $borderRadius;
          }
        }
      }

      .right {
        display: none;
      }
    }

    .bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      margin-top: 10px;

      .bodyThe {
        width: 100%;
        margin: 0px 11px;

        .list {
          .list-item {
            height: 160px;
            margin: 0px 10px 10px 10px;

            .list-content {
              height: 94px;

              .list-img {
                margin-right: 10px;

                &>a {
                  &>img {
                    height: 94px;
                  }
                }
              }

              .list-intro {
                &>a {
                  display: -webkit-box;
                  overflow: hidden;
                  overflow: hidden;
                  /* 超出n行这里写n */
                  -webkit-box-orient: vertical;

                  text-overflow: ellipsis;

                  font-size: 12px;
                  line-height: 20px;

                  -webkit-line-clamp: 4;
                }
              }
            }
          }

          .istop {
            left: 10px;

            width: 30px;
          }

          .tags {
            display: flex;
            align-items: center;

            height: 100%;



            &>span {
              margin-right: 10px !important;

              font-size: 12px !important;

              &>img {
                width: 14px !important;
                height: 14px !important;
                margin-right: 4px !important;
              }
            }
          }
        }
      }

      .commentsArticle {
        width: calc(100% - 20px);

        .articleDetails {
          width: calc(100% - 40px);

          .wz_info {
            flex-wrap: wrap;

            height: auto;
          }

        }

        .commentsDetails {
          width: calc(100% - 40px);
          margin-top: 10px;
        }
      }

      .sidebar {
        width: 100%;
        margin: 0px 11px;
        margin-top: 10px;

        .function {
          margin-bottom: 10px !important;
        }
      }
    }

    .footer {
      flex-direction: column;
    }

    .pageBar {
      flex-wrap: wrap;
    }
  }
}

@media screen and (min-width:480px) and (max-width: 768px) {
  .container {
    margin-top: 36px;
    padding-top: 10px;

    .footer {
      margin-top: 0px;
    }

    .location {
      width: calc(100% - 20px);
    }

    .top {

      .left {
        display: flex;
        justify-content: center;

        width: 100%;
        margin: 0px 10px;

        #vsCarousel {
          width: 100%;

          img {
            border-radius: $borderRadius;
          }
        }
      }

      .right {
        display: none;
      }
    }

    .bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      margin-top: 10px;

      .bodyThe {
        width: 100%;
        margin: 0px 11px;

        .list {
          .list-item {
            height: 160px;
            margin: 0px 10px 10px 10px;

            .list-content {
              height: 94px;

              .list-img {
                margin-right: 10px;

                &>a {
                  &>img {
                    height: 94px;
                  }
                }
              }

              .list-intro {
                &>a {
                  display: -webkit-box;
                  overflow: hidden;
                  overflow: hidden;
                  /* 超出n行这里写n */
                  -webkit-box-orient: vertical;

                  text-overflow: ellipsis;

                  font-size: 12px;
                  line-height: 20px;

                  -webkit-line-clamp: 4;
                }
              }
            }
          }

          .istop {
            left: 10px;

            width: 30px;
          }

          .tags {
            display: flex;
            align-items: center;

            height: 100%;



            &>span {
              margin-right: 10px !important;

              font-size: 12px !important;

              &>img {
                width: 14px !important;
                height: 14px !important;
                margin-right: 4px !important;
              }
            }
          }
        }
      }

      .commentsArticle {
        width: calc(100% - 20px);

        .articleDetails {
          width: calc(100% - 40px);

          .wz_info {
            flex-wrap: wrap;

            height: auto;
          }

        }

        .commentsDetails {
          width: calc(100% - 40px);
        }
      }

      .sidebar {
        width: 100%;
        margin: 0px 11px;
        margin-top: 10px;

        .function {
          margin-bottom: 10px !important;
        }
      }
    }

    .footer {
      flex-direction: column;
    }

    .pageBar {
      flex-wrap: wrap;
    }
  }
}

@media only screen and (max-width: 480px) {
  .container {
    margin-top: 36px;
    padding-top: 10px;

    .footer {
      margin-top: 0px;
    }

    .location {
      width: calc(100% - 20px);
    }

    .top {

      .left {
        display: flex;
        justify-content: center;

        width: 100%;
        margin: 0px 10px;

        #vsCarousel {
          width: 100%;

          img {
            border-radius: $borderRadius;
          }
        }
      }

      .right {
        display: none;
      }
    }

    .bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      margin-top: 10px;

      .bodyThe {
        width: 100%;
        margin: 0px 11px;

        .list {
          .list-item {
            height: auto;
            margin: 0px 10px 10px 10px;

            .list-content {
              flex-wrap: wrap;
              justify-content: center;

              height: 100%;

              .list-img {
                margin-right: 0px;

                &>a {
                  &>img {
                    height: 160px;
                  }
                }
              }

              .list-intro {
                &>a {
                  display: -webkit-box;
                  overflow: hidden;
                  overflow: hidden;
                  /* 超出n行这里写n */
                  -webkit-box-orient: vertical;

                  text-overflow: ellipsis;

                  font-size: 12px;
                  line-height: 20px;

                  -webkit-line-clamp: 4;
                }
              }
            }
          }

          .istop {
            left: 10px;

            width: 30px;
          }

          .tags {
            display: flex !important;
            align-items: center !important;
            flex-wrap: wrap;

            height: auto !important;



            &>span {
              font-size: 12px !important;

              &>img {
                width: 14px !important;
                height: 14px !important;
              }
            }
          }
        }
      }

      .commentsArticle {
        width: calc(100% - 20px);

        .articleDetails {
          width: calc(100% - 40px);

          .wz_info {
            flex-wrap: wrap;

            height: auto;
          }

        }

        .commentsDetails {
          width: calc(100% - 40px);
          margin-top: 10px;
        }
      }

      .sidebar {
        width: 100%;
        margin: 0px 11px;
        margin-top: 10px;

        .function {
          margin-bottom: 10px;
        }
      }
    }

    .footer {
      flex-direction: column;
    }

    .pageBar {
      flex-wrap: wrap;
    }
  }
}